<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>访问日志</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!-- jquery -->
	<script type="text/javascript" src="/js/jquery/jquery.min.2.14.js"></script>
	<link rel="stylesheet" href="../../../lib/layui/css/layui.css">
	<!-- 动画 -->
	<link rel="stylesheet" href="../../../css/animate.css">
	<script type="text/javascript" src="../../../lib/layui/layui.js"></script>
	<script type="text/javascript" src="../../../lib/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="../../../lib/echarts/macarons.js"></script>
	<script type="text/javascript" src="../../../js/ajax/core.js"></script>
	<script type="text/javascript" src="../../../js/layerAjaxMsg/default.js"></script>
	<!--	<script type="text/javascript" src="../../../lib/layer-v3.1.1/layer/layer.js"></script>-->
	<link rel="stylesheet" href="../../../lib/layer-v3.1.1/layer/theme/default/layer.css">
	<style type="text/css">
		.layui-btn.dis{
			background-color: #CCC
		}
		.button-bottom{
			width: 80px;
			font-size: 16px;
			margin-right: 10px;
		}
	</style>
</head>
<body style="padding:10px;">
	<fieldset class="layui-elem-field layui-field-title animated fadeInUp" style="margin-top: 20px;">
		<legend>访问日志</legend>
	</fieldset>

	<!-- 显示区 -->
	<div id="loggingText" contenteditable="true"
		 style="width:100%;height: 658px;background-color: ghostwhite; overflow: auto; background-color: black; color: white;"></div>

	<!-- 操作栏 -->
	<div style="text-align: center;margin-top: 10px;margin-bottom: -10px;">
		<button class="button-bottom" onclick="$('#loggingText').text('')" style="color: green; height: 35px;">清屏</button>
		<button class="button-bottom" onclick="$('#loggingText').animate({scrollTop:$('#loggingText')[0].scrollHeight});"
				style="color: green; height: 35px;">滚动至底
		</button>
		<button class="button-bottom" onclick="if(window.loggingAutoBottom){$(this).text('开启滚动');}else{$(this).text('关闭滚动');};window.loggingAutoBottom = !window.loggingAutoBottom"
				style="color: green; height: 35px; ">开启滚动
		</button>
	</div>
</body>
<script th:inline="javascript">
	//websocket对象
	let websocket = null;
	let ip_addr = document.location.hostname;

	//判断当前浏览器是否支持WebSocket
	if ('WebSocket' in window) {
		websocket = new WebSocket("ws://" + ip_addr + ":10001/websocket/logging/0");
	} else {
		console.error("不支持WebSocket");
	}

	//连接发生错误的回调方法
	websocket.onerror = function (e) {
		console.error("WebSocket连接发生错误");
	};

	//连接成功建立的回调方法
	websocket.onopen = function () {
		console.log("WebSocket连接成功")
	};

	//接收到消息的回调方法
	websocket.onmessage = function (event) {
		//追加
		if (event.data) {

			//日志内容
			let $loggingText = $("#loggingText");
			$loggingText.append(event.data);

			//是否开启自动底部
			if (window.loggingAutoBottom) {
				//滚动条自动到最底部
				$loggingText.scrollTop($loggingText[0].scrollHeight);
			}
		}
	}

	//连接关闭的回调方法
	websocket.onclose = function () {
		console.log("WebSocket连接关闭")
	};
</script>
</html>